<template>
  <el-dialog v-model="visible" title="审核" width="1200" destroy-on-close center @close="closeDialog">
    <div class="container">
      <!-- 主体 -->
      <div class="context">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <!-- 1 基本信息 -->
          <el-tab-pane label="基本信息" name="first">
            <el-descriptions title="基本信息" :column="5" size="large" direction="vertical" border>
              <el-descriptions-item label="出生年月">{{ formState.basicInfo.dateOfBirth }}</el-descriptions-item>
              <el-descriptions-item label="血型">{{ formState.basicInfo.bloodType }}</el-descriptions-item>
              <el-descriptions-item label="身高(cm)">{{ formState.basicInfo.heightInCm }}</el-descriptions-item>
              <el-descriptions-item label="体重(kg)">{{ formState.basicInfo.weightInKg }}</el-descriptions-item>
              <el-descriptions-item label="眼睛颜色">{{ formState.basicInfo.eyeColor }}</el-descriptions-item>
              <el-descriptions-item label="发色">{{ formState.basicInfo.hairColor }}</el-descriptions-item>
              <el-descriptions-item label="种族">{{ formState.basicInfo.ethnicity }}</el-descriptions-item>
              <el-descriptions-item label="学历">{{ formState.basicInfo.education }}</el-descriptions-item>
              <el-descriptions-item label="职业">{{ formState.basicInfo.occupation }}</el-descriptions-item>
              <el-descriptions-item label="健康状况">{{ formState.basicInfo.healthStatus }}</el-descriptions-item>
              <el-descriptions-item label="学校名称及专业">{{ formState.basicInfo.schoolNameMajor }}</el-descriptions-item>
              <el-descriptions-item label="GPA">{{ formState.basicInfo.gpa }}</el-descriptions-item>
              <el-descriptions-item label="其它特长">{{ formState.basicInfo.otherExpertise }}</el-descriptions-item>
              <el-descriptions-item label="婚姻状况">{{ formState.basicInfo.maritalStatus }}</el-descriptions-item>
              <el-descriptions-item label="运动习惯">{{ formState.basicInfo.exerciseHabit }}</el-descriptions-item>
              <el-descriptions-item label="性格特点" :span="5">{{ formState.basicInfo.personalityDescription }}</el-descriptions-item>
              <el-descriptions-item label="是否做过整形">{{ formState.basicInfo.hadPlasticSurgery }}</el-descriptions-item>
              <el-descriptions-item label="是否有捐赠经验">{{ formState.basicInfo.eggDonorExperience }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>

          <!-- 2 医疗背景 -->
          <el-tab-pane label="医疗背景" name="second">
            <el-descriptions title="医疗背景" :column="5" size="large" direction="vertical" border>
              <el-descriptions-item label="想当捐卵者的原因">{{ formState.medicalInfo.reasonToBeSpermDonor }}</el-descriptions-item>
              <el-descriptions-item label="最喜欢的食物">{{ formState.medicalInfo.favoriteFood }}</el-descriptions-item>
              <el-descriptions-item label="家庭成长感受">{{ formState.medicalInfo.familyGrowthFeeling }}</el-descriptions-item>
              <el-descriptions-item label="最喜欢的运动">{{ formState.medicalInfo.favoriteSport }}</el-descriptions-item>
              <el-descriptions-item label="特殊才能与技能">{{ formState.medicalInfo.specialTalentsSkills }}</el-descriptions-item>
              <el-descriptions-item label="最喜欢的书及原因" :span="5">{{ formState.medicalInfo.favoriteBookReason }}</el-descriptions-item>
              <el-descriptions-item label="最不喜欢的事">{{ formState.medicalInfo.dislikes }}</el-descriptions-item>
              <el-descriptions-item label="人生目标与抱负">{{ formState.medicalInfo.lifeGoalAmbition }}</el-descriptions-item>
              <el-descriptions-item label="是否收养子女">{{ formState.medicalInfo.isAdopted }}</el-descriptions-item>
              <el-descriptions-item label="亲属关系">{{ formState.medicalInfo.relative }}</el-descriptions-item>
              <el-descriptions-item label="是否有听力问题">{{ formState.medicalInfo.hearingProblems }}</el-descriptions-item>
              <el-descriptions-item label="是否吸烟">{{ formState.medicalInfo.smoking }}</el-descriptions-item>
              <el-descriptions-item label="是否有精神问题">{{ formState.medicalInfo.psychiatricCare }}</el-descriptions-item>
              <el-descriptions-item label="是否近视">{{ formState.medicalInfo.nearsightedness }}</el-descriptions-item>
              <el-descriptions-item label="是否做过近视矫正手术">{{ formState.medicalInfo.laserSurgery }}</el-descriptions-item>
              <el-descriptions-item label="牙齿问题描述" :span="5">{{ formState.medicalInfo.dentalProblems }}</el-descriptions-item>
              <el-descriptions-item label="是否有过重大疾病">{{ formState.medicalInfo.majorIllness }}</el-descriptions-item>
              <el-descriptions-item label="住院或手术描述" :span="5">{{ formState.medicalInfo.hospitalizationSurgeries }}</el-descriptions-item>
              <el-descriptions-item label="是否有慢性病">{{ formState.medicalInfo.chronicConditions }}</el-descriptions-item>
              <el-descriptions-item label="是否有性病">{{ formState.medicalInfo.sexuallyTransmittedDiseases }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>

          <!-- 3 生殖资料 -->
          <el-tab-pane label="生殖资料" name="third">
            <el-descriptions title="生殖资料" :column="5" size="large" direction="vertical" border>
              <el-descriptions-item label="最近一次看男科时间及结果">{{ formState.menstrualInfo.lastAndrologyVisitDate }}</el-descriptions-item>
              <el-descriptions-item label="最后一次前列腺检查时间及结果">{{ formState.menstrualInfo.papSmearDate }}</el-descriptions-item>
              <el-descriptions-item label="是否曾经使伴侣怀孕">{{ formState.menstrualInfo.previousPregnancies }}</el-descriptions-item>
              <el-descriptions-item label="目前避孕方式">{{ formState.menstrualInfo.contraceptionMethod }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>

          <!-- 4 家庭信息 -->
          <el-tab-pane label="家庭信息" name="fourth">
            <el-table :data="formState.familyList" border style="width: 100%">
              <el-table-column prop="relation" label="关系" />
              <el-table-column prop="relative" label="血缘关系" />
              <el-table-column prop="age" label="年龄" />
              <el-table-column prop="height" label="身高(cm)" />
              <el-table-column prop="weight" label="体重(kg)" />
              <el-table-column prop="race" label="种族" />
              <el-table-column prop="hairColor" label="发色" />
              <el-table-column prop="eyeColor" label="瞳色" />
              <el-table-column prop="occupation" label="职业" />
              <el-table-column prop="healthStatus" label="健康" />
              <el-table-column prop="education" label="学历" />
            </el-table>
          </el-tab-pane>

          <!-- 5 开放式问题 -->
          <el-tab-pane label="开放式问题" name="five">
            <el-descriptions title="开放式问题" :column="5" size="large" direction="vertical" border>
              <el-descriptions-item label="是否旅游到任何地方">{{ formState.openQuestions.hasTravelAnywhere }}</el-descriptions-item>
              <el-descriptions-item label="生活信条">{{ formState.openQuestions.lifeMotto }}</el-descriptions-item>
              <el-descriptions-item label="最喜欢音乐人">{{ formState.openQuestions.favoriteMusicArtist }}</el-descriptions-item>
              <el-descriptions-item label="在你家里成长是什么感觉">{{ formState.openQuestions.favoriteSport }}</el-descriptions-item>
              <el-descriptions-item label="您最不喜欢什么">{{ formState.openQuestions.dislikes }}</el-descriptions-item>
              <el-descriptions-item label="您的人生终极目标和抱负">{{ formState.openQuestions.lifeGoalAmbition }}</el-descriptions-item>
              <el-descriptions-item label="您最喜欢的食物是什么">{{ formState.openQuestions.favoriteFood }}</el-descriptions-item>
              <el-descriptions-item label="您为什么想成为捐卵者">{{ formState.openQuestions.reasonToBeEggDonor }}</el-descriptions-item>
              <el-descriptions-item label="描述您有什么特殊才能、技能、爱好和兴趣">{{
                formState.openQuestions.specialTalentsSkills
              }}</el-descriptions-item>
              <el-descriptions-item label="您最喜欢的书及原因" :span="5">{{ formState.openQuestions.favoriteBooks }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>

          <!-- 6 捐赠历史 -->
          <el-tab-pane label="捐赠历史" name="six">
            <el-table :data="formState.historyList" border style="width: 100%">
              <el-table-column prop="donationDate" label="捐精日期" />
              <el-table-column prop="donationHospitalCountry" label="捐赠医院/国家" />
              <el-table-column prop="address" label="精子质量评估(A+B)" />
              <el-table-column prop="pgsPassed" label="是否经过遗传筛查" />
            </el-table>
          </el-tab-pane>

          <!-- 7 7-9 占位 -->
          <el-tab-pane label="基因报告" name="seven">基因报告</el-tab-pane>
          <el-tab-pane label="个人照片" name="eight">个人照片</el-tab-pane>
          <el-tab-pane label="个人视频" name="nine">个人视频</el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <el-button @click="updateStatus(formState.sysUser, 2)">审核不通过</el-button>
      <el-button type="primary" @click="updateStatus(formState.sysUser, 1)">审核通过</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import type { TabsPaneContext } from 'element-plus';
import { ElMessage, ElMessage as message } from 'element-plus';
import { eggdonorsDetail } from '@/api/business/questionnaire/sperm-donors';
// import { shenheUser } from '@/api/system/user';
import { useRouter } from 'vue-router';
/* 事件声明 */
const emits = defineEmits<{
  closeDialog: [];
}>();

/* 组件入参 */
const props = defineProps<{
  visiable: boolean;
  donorId: string;
}>();
const router = useRouter();
/* 内部状态 */
const activeName = ref('first');
const visible = ref(false);

/* 数据结构（与模板保持一致） */
const formState = ref({
  sysUser: { shzt: null },
  basicInfo: {} as any,
  medicalInfo: {} as any,
  openQuestions: {} as any,
  menstrualInfo: {} as any,
  familyList: [] as any[],
  historyList: [] as any[]
});

/* 获取详情 */
const getEggdonorsDetail = async (id: string) => {
  const res = await eggdonorsDetail(id);
  formState.value = {
    sysUser: res.sysUser || {},
    basicInfo: res.basicInfo || {},
    medicalInfo: res.medicalInfo || {},
    openQuestions: res.openQuestions || {},
    menstrualInfo: res.menstrualInfo || {},
    familyList: res.familyList || [],
    historyList: res.historyList || []
  };
};

/* 审核 */
// const updateStatus = (data, status) => {
//   console.log(data);
//   data.shzt = status;
//   shenheUser(data).then((res) => {
//     ElMessage.success('审核成功');
//   });
// };

const closeDialog = () => emits('closeDialog');

/* 监听 props 控制弹窗 */
watch(
  () => props.visiable,
  (val) => {
    visible.value = val;
    if (val && props.donorId) getEggdonorsDetail(props.donorId);
  },
  { immediate: true }
);

/* 空实现防止 TS 报错 */
const handleClick = (_tab: TabsPaneContext, _event?: Event) => {
  /* no-op */
};
</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.container {
  margin: 15px;
}

.context {
  margin: 20px;
}
</style>
